<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <title>NCUT 猫</title>
    <!-- jquery -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/jquery.form.js"></script>
    <!-- popper -->
    <script src="./lib/popper.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/bootstrap-theme.min.css">
    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/bootstrap.bundle.min.js"></script>
    <!-- jtopo -->
    <script src="./lib/jtopo-0.4.8-min.js"></script>
    <!-- vue -->
    <script src="./lib/vue.js"></script>
    <!-- js -->
    <script src="./js/ConstData.js"></script>
    <script src="./js/tool.js"></script>
    <script src="./js/cat_info.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/mainFrame.css">
    <link rel="stylesheet" type="text/css" href="./css/tab-bar.css">
    <link rel="stylesheet" type="text/css" href="./css/cat_info.css">
    <!-- icon -->
    <script src="./icon/iconfont.js"></script>
    <style type="text/css">
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div id="head_carousel" class="carousel slide" data-bs-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-bs-target="#head_carousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#head_carousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#head_carousel" data-bs-slide-to="2"></li>
        </ul>
        <!-- 轮播图片 -->
        <div id="head-img" class="carousel-inner">
            <div class="carousel-item active">
                <img src="">
            </div>
            <div class="carousel-item">
                <img src="">
            </div>
            <div class="carousel-item">
                <img src="">
            </div>
        </div>
    </div>
    <div id="main-content" class="main-content module-list">
        <span id="cat_info">
            <span id="name">loading...</span>
            <svg id="sex_icon" class="icon" aria-hidden="true">
                <use xlink:href="#icon-nv"></use>
            </svg>
            <svg id="icon-heart" class="icon" aria-hidden="true">
                <use xlink:href="#icon-heart"></use>
            </svg>
            <svg id="icon-heart-none" class="icon" aria-hidden="true">
                <use xlink:href="#icon-heart-none"></use>
            </svg>
            <div id="sub_cat_info" class="module-list">
                <!-- <span class="module" id="sub_nick"><div>昵称</div>花花</span> -->
                <!-- 由JS: cat_info.js添加 -->
            </div>
            <div id="cat_info_tools">
                <span class="tool"></span>
                <span class="tool"></span>
                <span class="tool"></span>
                <span class="tool"></span>
                <span class="tool"></span>
                <span class="tool"></span>
                <span class="switch" style="animation-iteration-count: infinite;"></span>
                <br>
                <span class="info"></span>
                <span class="info"></span>
                <span class="info"></span>
                <span class="info"></span>
                <span class="info"></span>
                <span class="info"></span>
                <span class="infoLine" style="visibility: hidden;">&nbsp;</span>
                <script>
                    (async ()=>{
                        const iconBuilder=(name,c)=>`<svg class="icon ${c||''}" aria-hidden="true"><use xlink:href="#${name}"></use></svg>`;
                        //设置工具按钮
                        const tools=[
                            [
                                'icon-guanyu',['显示暂缺项','隐藏暂缺项'],
                                [
                                    ()=>$("#sub_cat_info>.none_data").css('display','inline-block'),
                                    ()=>$("#sub_cat_info>.none_data").hide()
                                ]
                            ],[
                                'icon-guanyu',['显示隐藏项','隐藏隐藏项'],
                                [
                                    ()=>$("#sub_cat_info>.hide_module").css('display','inline-block'),
                                    ()=>$("#sub_cat_info>.hide_module").hide()
                                ],
                                async ()=>await userHasPermission('create_cat','remove_cat','update_cat')
                            ],[
                                'icon-edit',['进入编辑','退出编辑'],
                                [
                                    ()=>editCatInfo(true),
                                    ()=>editCatInfo(false,()=>confirm("是否保存修改?"))
                                ],
                                async ()=>await userHasPermission('update_cat')
                            ]
                        ];
                        const tarTools=$("#cat_info_tools .tool");
                        const tarInfos=$("#cat_info_tools .info");
                        for (let index in tools){
                            if (!(tools[index] instanceof Array))continue;
                            let tarInfo;

                            $(tarTools[index]).html(iconBuilder(tools[index][0]));
                            (tarInfo=$(tarInfos[index])).html(tools[index][1][0]);

                            let func=tools[index][2];
                            let permission=tools[index][3];
                            if (permission&&!(await permission()))$(tarTools[index]).click(()=>alert('您没有足够的权限.'));
                            else {
                                const on=func[0],off=func[1];  
                                const onT=tools[index][1][0],offT=tools[index][1][1];
                                let status=false;
                                $(tarTools[index]).click(e=>{
                                    status?off(e):on(e);
                                    tarInfo.html(status?onT:offT);
                                    status=!status;
                                });
                            }
                        }
                        tarTools.hide();
                        tarInfos.hide();
                        // $("#cat_info_tools .tool").html(iconBuilder('icon-guanyu')).hide();//TODO
                        
                        const switchTime=700;
                        const switcher=$("#cat_info_tools .switch");
                        switcher.html(iconBuilder('icon-tianjia','icon-show')).append(iconBuilder('icon-minus-circle-fill','icon-hide'));

                         $("#cat_info_tools .infoLine").css('transition',`height ${switchTime/1000}s`);
                            
                        let open=0;
                        const switchFunc=async(e)=>{
                            if (open===1){
                                open=2;
                               if (e&&e.type==='mouseup') await new Promise(r=>setTimeout(r,5000));
                            }else if (open===2)return;//等待中


                            switcher.css('animation',`turn ${switchTime/1000}s forwards infinite`);
                            // switcher.css('animation',`turn ${switchTime/1000}s ease infinite`);
                            setTimeout(()=>switcher.css('animation',''),switchTime);
                            $("#cat_info_tools .switch .icon-show")[open?'fadeIn':'fadeOut'](switchTime);
                            $("#cat_info_tools .switch .icon-hide")[open?'fadeOut':'fadeIn'](switchTime);

                            const fade=select=>{
                                let tars = $(`#cat_info_tools .${select}`);
                                tars[open?'addClass':'removeClass']('hide');
                                tars.each((index,tar)=>{
                                let time=(index+1)/tars.length*switchTime;
                                    if (!open)time=switchTime-time;
                                    $(tar)[open?'fadeOut':'fadeIn'](time);
                                });
                            };
                            fade('tool');
                            fade('info');

                            open=open?0:1;
                        };
                        // switcher.mousedown(switchFunc);
                        // switcher.mouseup(switchFunc);
                        switcher.click(switchFunc);
                        $("#cat_info_tools .switch .icon-hide").hide();
                    })();
                </script>
            </div>
        </span>
        <span class="title">详情</span>
        <span id="cat_details">
        </span>
        <span class="title">关系网</span>
        <span id="cat_relation">
            <div class="btn-group" style="width: 90%;">
                <button type="button" class="btn btn-info" onclick="stage.zoomIn();">缩小</button>
                <button type="button" class="btn btn-info" onclick="stage.zoomOut();">放大</button>
                <button type="button" class="btn btn-info" onclick="let t=$(event.target);if (t.hasClass('active')){stage.wheelZoom = null;t.removeClass('active');}else{stage.wheelZoom = 1.2;t.addClass('active');}">鼠标缩放</button>
                <button type="button" class="btn btn-info" onclick="stage.centerAndZoom();">居中显示</button>
                <button type="button" class="btn btn-info" onclick="runPrefixMethod(stage.canvas, 'RequestFullScreen');">全屏显示</button>
            </div>
            <canvas id="cat_relation_canvas" width="500"></canvas>
            <script type="text/javascript">
            (() => {
                let last_full = false;
                let zoom = null;
                let last_w, last_h;
                let listener = e => { /*根据屏幕大小, 动态调整关系网大小*/
                    let full = !!runPrefixMethod(document, "FullscreenElement");
                    let screen = ((e || {}).currentTarget || window).document.body;
                    let w = full ? screen.clientWidth : screen.clientWidth * 0.9;
                    let h = full ? screen.clientHeight : w;
                    if (last_w !== w || last_h !== h) {
                        last_w = w;
                        last_h = h;
                        console.log('resize', w, h, screen.clientWidth, screen.clientHeight);
                        $("#cat_relation_canvas").attr('width', w).attr('height', h);
                    }
                    if (full != last_full) {
                        stage.centerAndZoom();
                        if (full) {
                            zoom = stage.wheelZoom;
                            stage.wheelZoom = 1.2;
                        } else stage.wheelZoom = zoom;
                        last_full = full;
                    }
                }
                $(window).resize(listener);
                listener();
            })();
            </script>
        </span>
        <span class="title">行踪</span>
        <span id="cat_path">阿巴阿巴</span>
        <span class="title">照片</span>
        <span id="cat_photo" style="text-align: left;"></span>
    </div>
</body>

</html>